<template>
  <div
    class="form-section"
    v-if="!formData.config.is_toolbar_tools && formData.config.has_btn"
  >
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.action_show', '按钮显示')"
          prop="config.action_show"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.action_show',
              '方法可以被使用的情况，选中单行可用，选中一行或者多行可用，选不选行都可用',
            )
          "
        >
          <el-checkbox-group v-model="formData.config.action_show">
            <el-checkbox label="工具栏(Toolbar)" value="toolbar" />
            <el-checkbox label="数据行(Row)" value="action_column" />
            <!-- <el-checkbox label="不显示(Hidden)" value="disable" /> -->
          </el-checkbox-group>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.when_enable', '可操作')"
          :tooltipContent="
            $t(
              'menu.dev.action.tip.when_enable',
              '按钮显示在“工具栏”还是“数据行”',
            )
          "
          prop="config.when_enable"
        >
          <el-radio-group v-model="formData.config.when_enable">
            <el-radio value="single"> 单行(Single) </el-radio>
            <el-radio value="multiple"> 多行(Multiple) </el-radio>
            <el-radio value="none"> 总是(Always) </el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.action_color', '按钮颜色')"
          prop="config.action_color"
          :tooltipContent="
            $t('menu.dev.action.tip.action_color', '按钮的配色方案')
          "
        >
          <ra-dict-select
            :placeholder="
              $p('menu.dev.action.field.action_color', '按钮颜色', 'select')
            "
            v-model="formData.config.action_color"
            code="sys_element_color"
            type="select"
            :color="true"
          />
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.action_icon', '按钮图标')"
          prop="config.action_icon"
          :tooltipContent="$t('menu.dev.action.tip.action_icon', '按钮图标')"
        >
          <icon-select v-model="formData.config.action_icon" />
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

defineProps({
  formData: {
    type: Object,
    required: true,
  },
});
</script>

<style lang="scss" scoped></style>
